====== Play music along several pages ======

SoSci gives you the opportunity to present music or videos along the whole qustionaire by means of a frameset. How this works is shown below.((Thanks to [[sbrand@students.uni-mainz.de|Sebastian Brand]] for this chapter.)).


===== Define a frameset =====

The first step is to create a frameset in SoSci Survey. Click [[http://wiki.selfhtml.org/wiki/HTML/Frames|SelfHTML: Frames]] to see what a frameset is. Loosley speaking a frameset is a table, which devides a website into areas, whereas the contents can be worked on individually. 

To generate a frameset in SoSci Survey a text file has to be created on the desktop. Name it e.g. “start.html”.

**Important:** It is crucial saving the file as a pure ASCII-text. Due to this it is necessary to use a text editor (e.g. [[https://notepad-plus-plus.org/|Notepad++]], [[http://www.scintilla.org/SciTE.html|SciTE]] or Windows note pad) but __no__ word processor such as MS Word or OpenOffice/LibreOffice.

**Important:** Take care that the file extension is changed respectively, converting the former text file into an html-file. The file should now contain the following html-code:

<file html start.html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Questionnaire</title>
  </head>
  <frameset rows="99%, 1%">
    <frame src="https://www.soscisurvey.de/PROJECT/" name="survey">
    <frame name="Exampleframe">
  </frameset>
</html>
</file>

Watch out for the line ''<frame src=...'' -- your individual questionnaire-URL should be taken down here ([[:en:survey:url]]) in order to start the questionnaire in the frame. According to personal needs and preferences the following changes in the code can be made additionally:

  * The attribute ''rows'' can be replaced by ''cols'' to change intersecting the page by line (frames below each other) to intersecting by row (next to each other).
  * Division by percentage can be adapted.
  * Frames can be renamed (attribute ''name'').
  * Frames ca be added as long as a total of 100 is summed up in the line and row percentages.
  * Using the command  ''%%border="0"%%''  borders around the frames can be deleted.

After creating and working on the file it can be loaded up in **pics and media** to the project directory. The result will be visible by attaching ''/start.html'' e.g. ''%%https://www.soscisurvey.de/PROJECT/start.html%%'' to the project’s URL.

**Important**: Do __not__ upload the protected filestorage!

Test whether you can open the URL ''%%https://www.soscisurvey.de/PROJECT/start.html%%'' in the Internet browser, and if that leads you to the questionnaire. Instead of ''PROJECT'' you have to use you project's folder, of course ([[:en:survey:url]]).

===== Prepare Frame content =====

The next step ist o decide what kind of content shall be uploaded to a frame. The frame should fit for a video in order to see it completely. In case of music it should be rather small so it doesn’t hide the questionnaire itself. If you know what contents ist to be added to the frame th following steps have to be taken; Create a new txt i.e. HTML file on the desktop e.g. ''play.html''. Edit file and add the HTML code which will play the contents. Here an example for music:

<file html play.html>
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Audio</title>
  </head>
  <body>
    <audio id="bgAudio01" preload autoplay style="position: absolute; left: -9999px; top: -9999px">
      <source src="EXAMPLE.MP3">
    </audio>
  </body>
</html>
</file>

Here the audio file was attached by ''<audio>''-tag, which is supported by most browsers. Attaching by flash player is explained here: [[:en:create:media]]

The music file („EXAMPLE.MP3“) has to be uploaded to SoSci Survey likewise. Setting the player’s pixel size to an absolute negative range (e.g. -9999px) lets the player disappear leaving the music playing. Now the edited file has to be loaded up to the project’s directory as well.

**Tip:** To determine the name of the audio file, go to Pictures and Files in the questionnaire menu of your project, there you will find the full name, which you can simply copy (usually the name under which you uploaded the file).

===== Load frame contents =====

Probably the audio file is not meant to play from the beginning but rather start at some point later on. For this purpose copy the file ''play.html'' via JavaScript to the little frame. This is achieved by creating a new text fragment in **Text Elements & Labels** containing the following:

<code html>
<script type="text/javascript">
<!--
top.Exampleframe.location.href = "play.html";
// -->
</script>
</code>

If this text fragment is now added to a page in the questionaire the content of the frame is changed automatically and music, video etc will be uploaded.


===== Delete frame contents =====

To empty frames (and to silence the music) load an empty HTML page into the frame. Most suitable an empty html document is created on the desktop which can be named ''empty.html''. As the name states leave it empty an upload respectively. The music can be stopped using the following command: 

<code html>
<script type="text/javascript">
<!--
top.Exampleframe.location.href = "empty.html";
// -->
</script>
</code>


===== Send Questionnaire with Frameset =====

To make full use of the frameset, the link to the questionnaire must be completed with the ending /start.html (or the individual name of your frameset). You should not forget this, otherwise it will not work. How the link to the questionnaire is composed you can read here: [[en:survey:url|]]
===== Limitations =====

  * While loading the frame set it is not possible to transmit variables (e.g. reference or serial number) to the questionaire, as mentioned here: [[:en:survey:url]].
  * Using this solution fading the music is not feasible. It is cut out abruptly loading the empty file.